// 导入懒加载方法
import { useIntersectionObserver } from '@vueuse/core'
// 导入默认图片
import defImg from '@/assets/images/200.png'
// 动图
import gif from '@/assets/images/load.gif'
export default {
  install (app) {
    // vue2中挂载全局属性
    // app.prototype.$http = 'axios'
    // vue3中挂载全局属性
    app.config.globalProperties.gif = gif
    // 自定义指令的作用是用来操作DOM
    app.directive('imgLazy', {

      mounted (el, binding) {
        // console.log('元素挂载了')
        // el 自定义指令绑定的元素
        // binding.value 获取元素上自定义指令的值
        // 当图片进入可视区后 把自定义指令绑定的值赋值给图片的src
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // 进入可视区后
            if (isIntersecting) {
              // 把图片地址赋值给src
              el.src = binding.value
              // 当图片加载失败后 给一个默认的图片
              el.onerror = () => {
                el.src = defImg
              }
              // 监控一次后 关闭监控
              stop()
            }
          }
        )
      }
    })
  }
}
